<template>
    <div id="app">
            <div id="food">
                <div class="food-list">
                    <i class="i"></i>
                    <h2>舌尖美食</h2>
                    <p>
                        <a href="javaScript:;">挂面</a>
                        <a href="javaScript:;">鸡蛋</a>
                        <a href="javaScript:;">桂圆干</a>
                        <a href="javaScript:;">红枣</a>
                        <a href="javaScript:;">食用油</a>
                        <a href="javaScript:;">大米</a>
                        <a href="javaScript:;">更多</a>
                    </p>
                    <i class="fa fa-arrow-circle-right fr" style="margin-left: 10px; font-size: 18px;"></i>
                    <span class="fr">
                        <a href="javaScript:;" class="a1">优质土蜂蜜 质量有保证</a>
                    </span>
                </div>
                <div class="food-count clearfix border1">
                    <div class="fl" style="display: inline-block;">
                        <a href="#"><img
                                src="https://pic2.ulecdn.com/item/user_0102/desc20201102/04fdf747fca4338b_-1x-1.jpg"></a>
                    </div>
                    <div class="fl about">
                        <ul>
                            <li>
                                <a href="#">
                                    <img src="https://pic4.ulecdn.com/item/user_0102/desc20211011/57cea3b43108922e_-1x-1.jpg"
                                        style="width: 190px;">
                                    <p>有又泡脚凤爪80g*3袋</p>
                                    <p class="p2">￥24.90</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="https://pic4.ulecdn.com/item/user_0102/desc20211011/57cea3b43108922e_-1x-1.jpg"
                                        style="width: 190px;">
                                    <p>有又泡脚凤爪80g*3袋</p>
                                    <p class="p2">￥24.90</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="https://pic4.ulecdn.com/item/user_0102/desc20211011/57cea3b43108922e_-1x-1.jpg"
                                        style="width: 190px;">
                                    <p>有又泡脚凤爪80g*3袋</p>
                                    <p class="p2">￥24.90</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="https://pic4.ulecdn.com/item/user_0102/desc20211011/57cea3b43108922e_-1x-1.jpg"
                                        style="width: 190px;">
                                    <p>有又泡脚凤爪80g*3袋</p>
                                    <p class="p2">￥24.90</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="https://pic4.ulecdn.com/item/user_0102/desc20211011/57cea3b43108922e_-1x-1.jpg"
                                        style="width: 190px;">
                                    <p>有又泡脚凤爪80g*3袋</p>
                                    <p class="p2">￥24.90</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="https://pic4.ulecdn.com/item/user_0102/desc20211011/57cea3b43108922e_-1x-1.jpg"
                                        style="width: 190px;">
                                    <p>有又泡脚凤爪80g*3袋</p>
                                    <p class="p2">￥24.90</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="https://pic4.ulecdn.com/item/user_0102/desc20211011/57cea3b43108922e_-1x-1.jpg"
                                        style="width: 190px;">
                                    <p>有又泡脚凤爪80g*3袋</p>
                                    <p class="p2">￥24.90</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="https://pic4.ulecdn.com/item/user_0102/desc20211011/57cea3b43108922e_-1x-1.jpg"
                                        style="width: 190px;">
                                    <p>有又泡脚凤爪80g*3袋</p>
                                    <p class="p2">￥24.90</p>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div id="food">
                <div class="food-list">
                    <i class="i i2"></i>
                    <h2 class="h2">家局必备</h2>
                    <p>
                        <a href="javaScript:;">四件套</a>
                        <a href="javaScript:;">浴巾</a>
                        <a href="javaScript:;">百洁布</a>
                        <a href="javaScript:;">洗洁精</a>
                        <a href="javaScript:;">抽取式面纸</a>
                        <a href="javaScript:;">洗手液</a>
                        <a href="javaScript:;">更多</a>
                    </p>
                    <i class="fa fa-arrow-circle-right fr" style="margin-left: 10px; font-size: 18px;"></i>
                    <span class="fr">
                        <a href="javaScript:;" class="a2">雅棉家居 享受生活</a>
                    </span>
                </div>
                <div class="food-count clearfix border2">
                    <div class="fl" style="display: inline-block;">
                        <a href="#"><img src="https://pic3.ulecdn.com/item/user_0102/desc20210419/4b44a699c1cc5a1d_-1x-1.png"></a>
                    </div>
                    <div class="fl about">
                        <ul>
                            <li>
                                <a href="#">
                                    <img src="https://pic1.ulecdn.com/item/user_0102/desc20210929/72588c45dfa21187_-1x-1.jpg"
                                        style="width: 190px;">
                                    <p>雅棉 素锦60支贡缎新疆长绒棉秋冬床上用品四件套</p>
                                    <p class="p2">￥24.90</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="https://pic1.ulecdn.com/item/user_0102/desc20210929/72588c45dfa21187_-1x-1.jpg"
                                        style="width: 190px;">
                                    <p>雅棉 素锦60支贡缎新疆长绒棉秋冬床上用品四件套</p>
                                    <p class="p2">￥24.90</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="https://pic1.ulecdn.com/item/user_0102/desc20210929/72588c45dfa21187_-1x-1.jpg"
                                        style="width: 190px;">
                                    <p>雅棉 素锦60支贡缎新疆长绒棉秋冬床上用品四件套</p>
                                    <p class="p2">￥24.90</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="https://pic1.ulecdn.com/item/user_0102/desc20210929/72588c45dfa21187_-1x-1.jpg"
                                        style="width: 190px;">
                                    <p>雅棉 素锦60支贡缎新疆长绒棉秋冬床上用品四件套</p>
                                    <p class="p2">￥24.90</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="https://pic1.ulecdn.com/item/user_0102/desc20210929/72588c45dfa21187_-1x-1.jpg"
                                        style="width: 190px;">
                                    <p>雅棉 素锦60支贡缎新疆长绒棉秋冬床上用品四件套</p>
                                    <p class="p2">￥24.90</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="https://pic1.ulecdn.com/item/user_0102/desc20210929/72588c45dfa21187_-1x-1.jpg"
                                        style="width: 190px;">
                                    <p>雅棉 素锦60支贡缎新疆长绒棉秋冬床上用品四件套</p>
                                    <p class="p2">￥24.90</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="https://pic1.ulecdn.com/item/user_0102/desc20210929/72588c45dfa21187_-1x-1.jpg"
                                        style="width: 190px;">
                                    <p>雅棉 素锦60支贡缎新疆长绒棉秋冬床上用品四件套</p>
                                    <p class="p2">￥24.90</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="https://pic1.ulecdn.com/item/user_0102/desc20210929/72588c45dfa21187_-1x-1.jpg"
                                        style="width: 190px;">
                                    <p>雅棉 素锦60支贡缎新疆长绒棉秋冬床上用品四件套</p>
                                    <p class="p2">￥24.90</p>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div id="food">
                <div class="food-list">
                    <i class="i i3"></i>
                    <h2 class="h3">智能生活</h2>
                    <p>
                        <a href="javaScript:;">电饭煲</a>
                        <a href="javaScript:;">养生壶</a>
                        <a href="javaScript:;">剃须刀</a>
                        <a href="javaScript:;">吸尘器</a>
                        <a href="javaScript:;">电磁炉</a>
                        <a href="javaScript:;">冰箱</a>
                        <a href="javaScript:;">更多</a>
                    </p>
                    <i class="fa fa-arrow-circle-right fr" style="margin-left: 10px; font-size: 18px;"></i>
                    <span class="fr">
                        <a href="javaScript:;" class="a3">荣事达 健康生活轻松掌握</a>
                    </span>
                </div>
                <div class="food-count clearfix border3">
                    <div class="fl" style="display: inline-block;">
                        <a href="#"><img src="https://pic4.ulecdn.com/item/user_0102/desc20210330/c4452542e421d8c7_-1x-1.jpg"></a>
                    </div>
                    <div class="fl about">
                        <ul>
                            <li>
                                <a href="#">
                                    <img src="https://pic4.ulecdn.com/item/user_0102/desc20210930/95e7fba520b74d4f_-1x-1.jpg"
                                        style="width: 190px;">
                                    <p>华为/HUAWEI P50 Pro 8GB+256GB手机 麒麟9000芯片 万象双环设 4G全网通</p>
                                    <p class="p2">￥6750.00</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="https://pic4.ulecdn.com/item/user_0102/desc20210930/95e7fba520b74d4f_-1x-1.jpg"
                                        style="width: 190px;">
                                    <p>华为/HUAWEI P50 Pro 8GB+256GB手机 麒麟9000芯片 万象双环设 4G全网通</p>
                                    <p class="p2">￥6750.00</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="https://pic4.ulecdn.com/item/user_0102/desc20210930/95e7fba520b74d4f_-1x-1.jpg"
                                        style="width: 190px;">
                                    <p>华为/HUAWEI P50 Pro 8GB+256GB手机 麒麟9000芯片 万象双环设 4G全网通</p>
                                    <p class="p2">￥6750.00</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="https://pic4.ulecdn.com/item/user_0102/desc20210930/95e7fba520b74d4f_-1x-1.jpg"
                                        style="width: 190px;">
                                    <p>华为/HUAWEI P50 Pro 8GB+256GB手机 麒麟9000芯片 万象双环设 4G全网通</p>
                                    <p class="p2">￥6750.00</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="https://pic4.ulecdn.com/item/user_0102/desc20210930/95e7fba520b74d4f_-1x-1.jpg"
                                        style="width: 190px;">
                                    <p>华为/HUAWEI P50 Pro 8GB+256GB手机 麒麟9000芯片 万象双环设 4G全网通</p>
                                    <p class="p2">￥6750.00</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="https://pic4.ulecdn.com/item/user_0102/desc20210930/95e7fba520b74d4f_-1x-1.jpg"
                                        style="width: 190px;">
                                    <p>华为/HUAWEI P50 Pro 8GB+256GB手机 麒麟9000芯片 万象双环设 4G全网通</p>
                                    <p class="p2">￥6750.00</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="https://pic4.ulecdn.com/item/user_0102/desc20210930/95e7fba520b74d4f_-1x-1.jpg"
                                        style="width: 190px;">
                                    <p>华为/HUAWEI P50 Pro 8GB+256GB手机 麒麟9000芯片 万象双环设 4G全网通</p>
                                    <p class="p2">￥6750.00</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="https://pic4.ulecdn.com/item/user_0102/desc20210930/95e7fba520b74d4f_-1x-1.jpg"
                                        style="width: 190px;">
                                    <p>华为/HUAWEI P50 Pro 8GB+256GB手机 麒麟9000芯片 万象双环设 4G全网通</p>
                                    <p class="p2">￥6750.00</p>
                                </a>
                            </li> 
                        </ul>
                    </div>
                </div>
            </div>
            <div id="food">
                <div class="food-list">
                    <i class="i i4"></i>
                    <h2 class="h4">时尚人生</h2>
                    <p>
                        <a href="javaScript:;">时尚女包</a>
                        <a href="javaScript:;">拉杆箱</a>
                        <a href="javaScript:;">女士睡衣</a>
                        <a href="javaScript:;">帐篷</a>
                        <a href="javaScript:;">牛仔裤</a>
                        <a href="javaScript:;">更多</a>
                    </p>
                    <i class="fa fa-arrow-circle-right fr" style="margin-left: 10px; font-size: 18px;"></i>
                    <span class="fr">
                        <a href="javaScript:;" class="a4">荣事达 健康生活轻松掌握</a>
                    </span>
                </div>
                <div class="food-count clearfix border4">
                    <div class="fl" style="display: inline-block;">
                        <a href="#"><img src="https://pic4.ulecdn.com/item/user_0102/desc20210322/e84f6075942da850_-1x-1.png"></a>
                    </div>
                    <div class="fl about">
                        <ul>
                            <li>
                                <a href="#">
                                    <img src="https://pic2.ulecdn.com/item/user_0102/desc20210819/1a6c9838e4dde834_-1x-1.jpg"
                                        style="width: 190px;">
                                    <p>SEPTWOLVES 七匹狼皮带XY08660904</p>
                                    <p class="p2">￥328.00</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="https://pic2.ulecdn.com/item/user_0102/desc20210819/1a6c9838e4dde834_-1x-1.jpg"
                                        style="width: 190px;">
                                    <p>SEPTWOLVES 七匹狼皮带XY08660904</p>
                                    <p class="p2">￥328.00</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="https://pic2.ulecdn.com/item/user_0102/desc20210819/1a6c9838e4dde834_-1x-1.jpg"
                                        style="width: 190px;">
                                    <p>SEPTWOLVES 七匹狼皮带XY08660904</p>
                                    <p class="p2">￥328.00</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="https://pic2.ulecdn.com/item/user_0102/desc20210819/1a6c9838e4dde834_-1x-1.jpg"
                                        style="width: 190px;">
                                    <p>SEPTWOLVES 七匹狼皮带XY08660904</p>
                                    <p class="p2">￥328.00</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="https://pic2.ulecdn.com/item/user_0102/desc20210819/1a6c9838e4dde834_-1x-1.jpg"
                                        style="width: 190px;">
                                    <p>SEPTWOLVES 七匹狼皮带XY08660904</p>
                                    <p class="p2">￥328.00</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="https://pic2.ulecdn.com/item/user_0102/desc20210819/1a6c9838e4dde834_-1x-1.jpg"
                                        style="width: 190px;">
                                    <p>SEPTWOLVES 七匹狼皮带XY08660904</p>
                                    <p class="p2">￥328.00</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="https://pic2.ulecdn.com/item/user_0102/desc20210819/1a6c9838e4dde834_-1x-1.jpg"
                                        style="width: 190px;">
                                    <p>SEPTWOLVES 七匹狼皮带XY08660904</p>
                                    <p class="p2">￥328.00</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="https://pic2.ulecdn.com/item/user_0102/desc20210819/1a6c9838e4dde834_-1x-1.jpg"
                                        style="width: 190px;">
                                    <p>SEPTWOLVES 七匹狼皮带XY08660904</p>
                                    <p class="p2">￥328.00</p>
                                </a>
                            </li>
                            
                        </ul>
                    </div>
                </div>
            </div>
            <div id="food">
                <div class="food-list">
                    <i class="i i5"></i>
                    <h2 class="h5">美妆洗护</h2>
                    <p>
                        <a href="javaScript:;">洗发水</a>
                        <a href="javaScript:;">卫生巾</a>
                        <a href="javaScript:;">洗面奶</a>
                        <a href="javaScript:;">护手霜</a>
                        <a href="javaScript:;">面膜</a>
                        <a href="javaScript:;">沐浴露</a>
                        <a href="javaScript:;">更多</a>
                    </p>
                    <i class="fa fa-arrow-circle-right fr" style="margin-left: 10px; font-size: 18px;"></i>
                    <span class="fr">
                        <a href="javaScript:;" class="a5">荣事达 健康生活轻松掌握</a>
                    </span>
                </div>
                <div class="food-count clearfix border5">
                    <div class="fl" style="display: inline-block;">
                        <a href="#"><img src="https://pic3.ulecdn.com/item/user_0102/desc20210312/b9a3f99df44df298_-1x-1.jpg"></a>
                    </div>
                    <div class="fl about">
                        <ul>
                            <li>
                                <a href="#">
                                    <img src="https://pic2.ulecdn.com/item/user_0102/desc20210817/13d863b92bcff0ef_-1x-1.jpg"
                                        style="width: 190px;">
                                    <p>相宜本草（INOHERB） 红景天水光幼亮素颜霜50g*2</p>
                                    <p class="p2">￥104.00</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="https://pic2.ulecdn.com/item/user_0102/desc20210817/13d863b92bcff0ef_-1x-1.jpg"
                                        style="width: 190px;">
                                    <p>相宜本草（INOHERB） 红景天水光幼亮素颜霜50g*2</p>
                                    <p class="p2">￥104.00</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="https://pic2.ulecdn.com/item/user_0102/desc20210817/13d863b92bcff0ef_-1x-1.jpg"
                                        style="width: 190px;">
                                    <p>相宜本草（INOHERB） 红景天水光幼亮素颜霜50g*2</p>
                                    <p class="p2">￥104.00</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="https://pic2.ulecdn.com/item/user_0102/desc20210817/13d863b92bcff0ef_-1x-1.jpg"
                                        style="width: 190px;">
                                    <p>相宜本草（INOHERB） 红景天水光幼亮素颜霜50g*2</p>
                                    <p class="p2">￥104.00</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="https://pic2.ulecdn.com/item/user_0102/desc20210817/13d863b92bcff0ef_-1x-1.jpg"
                                        style="width: 190px;">
                                    <p>相宜本草（INOHERB） 红景天水光幼亮素颜霜50g*2</p>
                                    <p class="p2">￥104.00</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="https://pic2.ulecdn.com/item/user_0102/desc20210817/13d863b92bcff0ef_-1x-1.jpg"
                                        style="width: 190px;">
                                    <p>相宜本草（INOHERB） 红景天水光幼亮素颜霜50g*2</p>
                                    <p class="p2">￥104.00</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="https://pic2.ulecdn.com/item/user_0102/desc20210817/13d863b92bcff0ef_-1x-1.jpg"
                                        style="width: 190px;">
                                    <p>相宜本草（INOHERB） 红景天水光幼亮素颜霜50g*2</p>
                                    <p class="p2">￥104.00</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="https://pic2.ulecdn.com/item/user_0102/desc20210817/13d863b92bcff0ef_-1x-1.jpg"
                                        style="width: 190px;">
                                    <p>相宜本草（INOHERB） 红景天水光幼亮素颜霜50g*2</p>
                                    <p class="p2">￥104.00</p>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div id="walk">
                <h2>逛一逛</h2>
                <div class="goods">
                    <ul>
                        <li>
                            <img src="https://pic.ulecdn.com/pic/user_800108882/product/prd20210719/88488a8b2b80a2d9_p800x800_l.jpg" style="width: 180px;">
                            <p>【领劵立减150元】荣耀50 SE 8+128G全网通手机 1亿像素超清影像 5G 全视屏</p>
                            <span>￥2189.00</span>
                        </li>
                        <li>
                            <img src="https://pic.ulecdn.com/pic/user_800108882/product/prd20210719/88488a8b2b80a2d9_p800x800_l.jpg" style="width: 180px;">
                            <p>【领劵立减150元】荣耀50 SE 8+128G全网通手机 1亿像素超清影像 5G 全视屏</p>
                            <span>￥2189.00</span>
                        </li>
                        <li>
                            <img src="https://pic.ulecdn.com/pic/user_800108882/product/prd20210719/88488a8b2b80a2d9_p800x800_l.jpg" style="width: 180px;">
                            <p>【领劵立减150元】荣耀50 SE 8+128G全网通手机 1亿像素超清影像 5G 全视屏</p>
                            <span>￥2189.00</span>
                        </li>
                        <li>
                            <img src="https://pic.ulecdn.com/pic/user_800108882/product/prd20210719/88488a8b2b80a2d9_p800x800_l.jpg" style="width: 180px;">
                            <p>【领劵立减150元】荣耀50 SE 8+128G全网通手机 1亿像素超清影像 5G 全视屏</p>
                            <span>￥2189.00</span>
                        </li>
                        <li>
                            <img src="https://pic.ulecdn.com/pic/user_800108882/product/prd20210719/88488a8b2b80a2d9_p800x800_l.jpg" style="width: 180px;">
                            <p>【领劵立减150元】荣耀50 SE 8+128G全网通手机 1亿像素超清影像 5G 全视屏</p>
                            <span>￥2189.00</span>
                        </li>
                        <li>
                            <img src="https://pic.ulecdn.com/pic/user_800108882/product/prd20210719/88488a8b2b80a2d9_p800x800_l.jpg" style="width: 180px;">
                            <p>【领劵立减150元】荣耀50 SE 8+128G全网通手机 1亿像素超清影像 5G 全视屏</p>
                            <span>￥2189.00</span>
                        </li>
                        <li>
                            <img src="https://pic.ulecdn.com/pic/user_800108882/product/prd20210719/88488a8b2b80a2d9_p800x800_l.jpg" style="width: 180px;">
                            <p>【领劵立减150元】荣耀50 SE 8+128G全网通手机 1亿像素超清影像 5G 全视屏</p>
                            <span>￥2189.00</span>
                        </li>
                        <li>
                            <img src="https://pic.ulecdn.com/pic/user_800108882/product/prd20210719/88488a8b2b80a2d9_p800x800_l.jpg" style="width: 180px;">
                            <p>【领劵立减150元】荣耀50 SE 8+128G全网通手机 1亿像素超清影像 5G 全视屏</p>
                            <span>￥2189.00</span>
                        </li>
                        <li>
                            <img src="https://pic.ulecdn.com/pic/user_800108882/product/prd20210719/88488a8b2b80a2d9_p800x800_l.jpg" style="width: 180px;">
                            <p>【领劵立减150元】荣耀50 SE 8+128G全网通手机 1亿像素超清影像 5G 全视屏</p>
                            <span>￥2189.00</span>
                        </li>
                        <li>
                            <img src="https://pic.ulecdn.com/pic/user_800108882/product/prd20210719/88488a8b2b80a2d9_p800x800_l.jpg" style="width: 180px;">
                            <p>【领劵立减150元】荣耀50 SE 8+128G全网通手机 1亿像素超清影像 5G 全视屏</p>
                            <span>￥2189.00</span>
                        </li>
                    </ul>
                </div>
            </div>
    </div>

</template>

<script>
    export default{
        name:"Food"
    }
</script>

<style scoped="scoped">
    @import url("../assets/css/reset.css");
    @import url("../assets/css/Food.css");
</style>
